<script setup lang="ts">
import { ref } from 'vue'
import useStore from '../store'
const { main } = useStore()
const { addTodo } = main
const name = ref('')
const handelKeyUp = () => {
  if (name.value.trim() === '') return alert('输入不能为空')
  addTodo(name.value)
  name.value = ''
}
</script>
<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keyup.enter="handelKeyUp" />
  </header>
</template>